<template>
    <div class="registerMain">
        <router-view ></router-view>
        <!-- 遮盖层用户协议 -->
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div class="header">注册协议及隐私政策</div>
                    <div class="content">
                        <p>在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，<span>请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span></p>
                        <router-link to="home">《京东用户注册协议》</router-link>
                        <router-link to="home">《京东隐私政策》</router-link>
                        <router-link to="home">《订单共享与安全》</router-link>
                        <p><span>【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。</span>如您对以上协议内容有任何疑问，您可随时与京东客服联系。</p>
                    </div>
                    <div class="footer">
                        <p>点击同意即表示您已阅读并同意<router-link to="home"> 《京东用户注册协议》</router-link>与<router-link to="home"> 《京东隐私政策》</router-link>并将您的订单信息共享给为完成此订单所必须的第三方合作方。关于<router-link to="home"> 《订单共享与安全》</router-link></p>
                        <div class="but">
                            <a class="noconsent" href="javascript:;" @click="$router.back()">不同意</a>
                            <a class="consent" href="javascript:;" @click="show = false">同意</a>
                        </div>
                    </div>
                </div>
            </div>
    </van-overlay>
    </div>
</template>
<style lang="stylus" scoped>
.wrapper
    display flex
    align-items center
    justify-content center
    height 100%
.block
    width 19.6875rem
    height 25rem
    background-color #fff
    border-radius .625rem
    display flex
    flex-direction column
    overflow auto
    .header
        height 5rem
        display flex
        justify-content center
        align-items center
        padding .625rem 0
    .content
        overflow auto
        padding 0 1.25rem
        font-size .875rem
        line-height 1.5rem
        display flex
        flex-direction column
        a
            color black
        span
            position relative
            border-bottom 1.5px solid black
    .footer
        border-radius .5rem .5rem 0 0
        height 15rem
        box-shadow 0px 0px .3125rem 0px #000
        p
            padding .625rem 1.25rem
            font-size .8125rem
            a
                color rgb(59,122,219)
                text-decoration underline
        .but
            display flex
            height 3.125rem
            display flex
            align-items center
            width 100%
            a
                flex 1
                height: 100%
                display flex
                justify-content center
                align-items center
            .consent
                background linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)
                color white
            .noconsent
                color black
                box-sizing border-box
                border-top 1px solid #ccc

</style>
<script>
import Vue from 'vue'
import { Overlay } from 'vant'
Vue.use(Overlay)
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>
